<template>
  <div class="drilldownList">
    <div class="trendList">
      <div class="trendListName">
        <div class="newBusinessHeader" v-for="(item, index) in list" :key="index">{{ item.name }}</div>
      </div>
      <!-- <div>
          <div class="sortTble">
            <div style="background:none;padding:16px 6px">
              <div :class="trendItemHistoryUpCss ? 'triangleUp' : 'triangleUpDefalt'" @click="trendItemHistoryUp"></div>
              <div
                :class="trendItemHistoryDownCss ? 'triangleDown' : 'triangleDownDefalt'"
                @click="trendItemHistoryDown"
              ></div>
            </div>
          </div>
        </div> -->
      <div v-for="(item, index) in itemData.content" :key="index" class="trendListItem" @click="handleTrendClick(item)">
        <div class="trendItemName">{{ item.orgBranchName }}</div>
        <div :class="item.type === 1 ? 'trendItemHistory' : 'trendItemNow'">{{ item.targetValue }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['list', 'itemData'],
  data() {
    return {
      trendItemHistoryUpCss: false,
      trendItemHistoryDownCss: false,
      trendItem: {}
    }
  },
  methods: {
    trendItemHistoryUp() {
      // this.actionTableList = this.actionTableList.sort((a, b) => a.trendItemHistory - b.trendItemHistory)
      this.trendItemHistoryUpCss = true
      this.trendItemHistoryDownCss = false
    },
    trendItemHistoryDown() {
      // this.actionTableList = this.actionTableList.sort((a, b) => b.trendItemHistory - a.trendItemHistory)
      this.trendItemHistoryUpCss = false
      this.trendItemHistoryDownCss = true
    },
    trendItemNowUp() {
      // this.actionTableList = this.actionTableList.sort((a, b) => a.trendItemNow - b.trendItemNow)
    },
    trendItemNowDown() {
      // this.actionTableList = this.actionTableList.sort((a, b) => b.trendItemNow - a.trendItemNow)
    },
    handleTrendClick(item) {
      this.trendItem = item
      this.$emit('getTrendList', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.drilldownList {
  .trendList {
    .trendListName {
      display: flex;
      justify-content: space-between;
      line-height: 46px;
      height: 46px;
    }
    // :nth-child(odd) {
    //   background-color: rgba(10, 13, 60, 1);
    // }
    // :nth-child(even) {
    //   background-color: rgba(28, 30, 72, 1);
    // }
    .triangleUpDefalt {
      width: 10px;
      height: 6px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid rgba(255, 255, 255, 0.32);
      margin-bottom: 2px;
    }
    .triangleUp {
      width: 10px;
      height: 6px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid rgba(255, 255, 255, 1);
      margin-bottom: 2px;
    }
    .triangleDownDefalt {
      width: 10px;
      height: 6px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid rgba(255, 255, 255, 0.32);
    }
    .triangleDown {
      width: 10px;
      height: 6px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid rgba(255, 255, 255, 1);
    }
    .trendItemNowUpDefalt {
      width: 10px;
      height: 6px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid rgba(255, 255, 255, 0.32);
      margin-bottom: 2px;
    }
    .trendItemNowUp {
      width: 10px;
      height: 6px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid rgba(255, 255, 255, 1);
      margin-bottom: 2px;
    }
    .trendItemNowDownDefalt {
      width: 10px;
      height: 6px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid rgba(255, 255, 255, 0.32);
    }
    .trendItemNowDown {
      width: 10px;
      height: 6px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid rgba(255, 255, 255, 1);
    }
    .sortTble {
      display: flex;
    }
    .newBusinessHeader {
      font-size: 16px;
      color: rgba(208, 213, 255, 0.5);
    }
    .trendListItem {
      line-height: 46px;
      height: 46px;
      display: flex;
      border-top: 1px dashed rgba(208, 213, 255, 0.3);
      justify-content: space-between;
      align-items: center;
      .trendItemName {
        font-size: 18px;
        line-height: 25px;
        color: #fff;
        background: none;
      }
      .trendItemHistory {
        font-weight: 500;
        color: #fcae00;
        line-height: 23px;
        font-size: 16px;
        background: none;
      }
      .trendItemNow {
        font-weight: 500;
        color: #ffffff;
        line-height: 23px;
        font-size: 16px;
        background: none;
      }
    }
  }
}
</style>
